<!-- 用户管理 -->
<template>
  <div class="app-container">
    <!--部门数据-->
    <div class="left-dom" id="rightDom">
      <div class="title">
        <div class="rectangle"></div>部门列表
        <el-icon :size="20" @click="getDeptTree" style="position: absolute;right: 27px;cursor: pointer;" title="刷新树">
          <Refresh />
        </el-icon>
      </div>
      <div style="height: calc(100% - 50px);position:relative">
        <el-input v-model="deptName" placeholder="请输入部门名称" clearable prefix-icon="Search" style="margin-bottom: 16px" />
        <div class="tree-body">
          <el-tree class="my-tree" :data="deptOptions" :props="{ label: 'label', children: 'children' }"
            :expand-on-click-node="false" :filter-node-method="filterNode" ref="deptTreeRef" node-key="id"
            highlight-current @node-click="handleNodeClick">
            <template #default="{ node, data }">
              <span class="content">
                <div v-if="data.type != '2'" class="node-icon">
                  <svg-icon :icon-class="getNodeImg(data)" />
                </div>
                <span> {{ node.label }}</span>
              </span>
            </template></el-tree>
        </div>
      </div>
    </div>
    <!--用户数据-->
    <div class="right-dom" id="container">
      <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
        <el-form-item label="账号" prop="userName">
          <el-input v-model="queryParams.userName" placeholder="请输入账号" clearable @keyup.enter="handleQuery" />
        </el-form-item>
        <el-form-item label="用户姓名" prop="nickName">
          <el-input v-model="queryParams.nickName" placeholder="请输入用户姓名" clearable @keyup.enter="handleQuery" />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="queryParams.status" placeholder="用户状态" filterable clearable>
            <el-option v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="手机号码" prop="phonenumber">
          <el-input v-model="queryParams.phonenumber" placeholder="请输入手机号码" clearable @keyup.enter="handleQuery" />
        </el-form-item>
        <el-form-item label="角色" prop="roleId">
          <el-select v-model="queryParams.roleId" filterable clearable placeholder="请选择">
            <el-option v-for="item in roleOptions" :key="item.roleId" :label="item.roleName" :value="item.roleId"
              :disabled="item.status == 1">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="创建时间" style="width: 308px;">
          <el-date-picker v-model="dateRange" value-format="YYYY-MM-DD" type="daterange" range-separator="-"
            start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>

      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['system:user:add']">新增</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete"
            v-hasPermi="['system:user:remove']">删除</el-button>
        </el-col>
        <!-- <el-col :span="1.5">
               <el-button type="info" plain icon="Upload" @click="handleImport"
                  v-hasPermi="['system:user:import']">导入</el-button>
            </el-col> -->
        <el-col :span="1.5">
          <el-button type="warning" plain icon="Download" @click="handleExport"
            v-hasPermi="['system:user:export']">导出</el-button>
        </el-col>
        <!-- <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" :columns="columns"></right-toolbar> -->
      </el-row>

      <el-table highlight-current-row v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="50" align="left" />
        <el-table-column label="用户编号" align="left" key="userId" prop="userId" v-if="columns[0].visible" width="100" />
        <el-table-column label="账号" align="left" key="userName" prop="userName" v-if="columns[1].visible"
          :show-overflow-tooltip="true" />
        <el-table-column label="角色名" align="left" key="roleName" prop="roleName" :show-overflow-tooltip="true" />
        <el-table-column label="用户姓名" align="left" key="nickName" prop="nickName" v-if="columns[2].visible"
          :show-overflow-tooltip="true" />
        <el-table-column label="部门" align="left" key="deptName" prop="dept.title" v-if="columns[3].visible"
          :show-overflow-tooltip="true">
          <template #default="scope">
            <span>{{ scope.row.dept.deptName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="手机号码" align="left" key="phonenumber" prop="phonenumber" v-if="columns[4].visible"
          width="120" />
        <el-table-column label="状态" align="left" key="status" v-if="columns[5].visible" width="100">
          <template #default="scope">
            <el-switch v-model="scope.row.status" active-value="0" inactive-value="1"
              @change="handleStatusChange(scope.row)"></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" align="left" prop="createTime" v-if="columns[6].visible" width="160">
          <template #default="scope">
            <span>{{ parseTime(scope.row.createTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="left" width="340" class-name="small-padding fixed-width">
          <template #default="scope">
            <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-if="scope.row.userId !== 1"
              v-hasPermi="['system:user:edit']">修改</el-button>
            <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-if="scope.row.userId !== 1"
              v-hasPermi="['system:user:remove']">删除</el-button>
            <el-button link type="primary" icon="Key" @click="handleResetPwd(scope.row)" v-if="scope.row.userId !== 1"
              v-hasPermi="['system:user:resetPwd']">重置密码</el-button>
            <el-button link type="primary" icon="CircleCheck" @click="handleAuthRole(scope.row)"
              v-if="scope.row.userId !== 1" v-hasPermi="['system:user:edit']">分配角色</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize" @pagination="getList" />
    </div>

    <!-- 添加或修改用户配置对话框 -->
    <el-dialog :title="title" v-model="open" width="800px" class="update-dom">
      <el-form :model="form" :rules="rules" ref="userRef" label-width="80px">
        <el-row>
          <el-col :span="11">
            <el-form-item label="用户姓名" prop="nickName">
              <el-input v-model="form.nickName" placeholder="请输入用户姓名" maxlength="30" />
            </el-form-item>
          </el-col>
          <el-col :span="2"> </el-col>
          <el-col :span="11">
            <el-form-item label="归属部门" prop="deptId">
              <el-tree-select v-model="form.deptId" :data="deptOptions"
                :props="{ value: 'id', label: 'label', children: 'children' }" value-key="id" placeholder="请选择归属部门"
                check-strictly filterable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item v-if="form.userId == undefined" label="账号" prop="userName">
              <el-input v-model="form.userName" placeholder="请输入账号" maxlength="30" />
            </el-form-item>
          </el-col>
          <el-col :span="2"> </el-col>
          <el-col :span="11">
            <el-form-item v-if="form.userId == undefined" label="密码" prop="password">
              <el-input v-model="form.password" placeholder="请输入密码" type="password" maxlength="20" show-password />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="手机号码" prop="phonenumber">
              <el-input v-model="form.phonenumber" placeholder="请输入手机号码" maxlength="11" />
            </el-form-item>
          </el-col>
          <el-col :span="2"> </el-col>
          <el-col :span="11">
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="用户性别">
              <el-select v-model="form.sex" placeholder="请选择" filterable>
                <el-option v-for="dict in sys_user_sex" :key="dict.value" :label="dict.label"
                  :value="dict.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="2"> </el-col>
          <el-col :span="11">
            <el-form-item label="状态">
              <el-radio-group v-model="form.status">
                <el-radio v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.value">{{ dict.label
                }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="岗位">
              <el-select v-model="form.postIds" multiple placeholder="请选择" filterable>
                <el-option v-for="item in postOptions" :key="item.postId" :label="item.postName" :value="item.postId"
                  :disabled="item.status == 1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="2"> </el-col>
          <el-col :span="11">
            <el-form-item label="角色">
              <el-select v-model="form.roleIds" multiple collapse-tags collapse-tags-tooltip placeholder="请选择" filterable>
                <el-option v-for="item in eidtRoleOptions" :key="item.roleId" :label="item.roleName" :value="item.roleId"
                  :disabled="item.status == 1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="14">
            <el-form-item label="生效时间">
              <el-date-picker v-model="form.time" value-format="YYYY-MM-DD HH:mm:ss" type="datetimerange" :default-time="[new Date(2000, 1, 1, 0, 0, 0),
              new Date(2000, 2, 1, 23, 59, 59),]" range-separator="-" start-placeholder="开始时间" end-placeholder="结束时间"
                :disabled="form.status == 1">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="1">
            <el-tooltip effect="dark" content="生效时间不填写,则全时间段生效；当用户处于停用状态，则该字段自动失效" placement="top">
              <el-icon style="margin:8px 0 0 5px">
                <QuestionFilled />
              </el-icon>
            </el-tooltip>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注">
              <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 用户导入对话框 -->
    <el-dialog :title="upload.title" v-model="upload.open" width="400px" append-to-body>
      <el-upload ref="uploadRef" :limit="1" accept=".xlsx, .xls" :headers="upload.headers"
        :action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <template #tip>
          <div class="el-upload__tip text-center">
            <div class="el-upload__tip">
              <el-checkbox v-model="upload.updateSupport" />是否更新已经存在的用户数据
            </div>
            <span>仅允许导入xls、xlsx格式文件。</span>
            <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;"
              @click="importTemplate">下载模板</el-link>
          </div>
        </template>
      </el-upload>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitFileForm">确 定</el-button>
          <el-button @click="upload.open = false">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="User">
import dayjs from "dayjs"
import { getToken } from "@/utils/auth";
import { changeUserStatus, listUser, resetUserPwd, delUser, getUser, updateUser, addUser } from "@/api/system/user";
import { treeDept } from "@/api/system/dept";

const router = useRouter();
const { proxy } = getCurrentInstance();
const { sys_normal_disable, sys_user_sex } = proxy.useDict("sys_normal_disable", "sys_user_sex");

const userList = ref([]);
const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");
const dateRange = ref([]);
const deptName = ref("");
const deptOptions = ref(undefined);
const initPassword = ref(undefined);
const postOptions = ref([]);
const roleOptions = ref([]);
// 新增和编辑下拉使用的参数
const eidtRoleOptions = ref([]);
/*** 用户导入参数 */
const upload = reactive({
  // 是否显示弹出层（用户导入）
  open: false,
  // 弹出层标题（用户导入）
  title: "",
  // 是否禁用上传
  isUploading: false,
  // 是否更新已经存在的用户数据
  updateSupport: 0,
  // 设置上传的请求头部
  headers: { Authorization: "Bearer " + getToken() },
  // 上传的地址
  url: import.meta.env.VITE_APP_BASE_API + "/system/user/importData"
});
// 列显隐信息
const columns = ref([
  { key: 0, label: `用户编号`, visible: true },
  { key: 1, label: `账号`, visible: true },
  { key: 2, label: `用户姓名`, visible: true },
  { key: 3, label: `部门`, visible: true },
  { key: 4, label: `手机号码`, visible: true },
  { key: 5, label: `状态`, visible: true },
  { key: 6, label: `创建时间`, visible: true }
]);

const passwordValidate = (rule, value, callback) => {
  if (value === "" || value === null || value === undefined) {
    callback(new Error("密码不能为空"));
  } else {
    if (value.length < 8) {
      callback(new Error("密码要求长度8位及以上"));
    }
    let MyRegExp = /^(?![A-z0-9]+$)(?=.[^%&',;=?$\x22])(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9]).{8,100}$/
    if (!MyRegExp.test(value)) {
      callback(
        new Error("密码要包含大小写字母、数字和特殊符号")
      );
    } else {
      //校验通过
      callback();
    }
  }
};
const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 15,
    userName: undefined,
    nickName: undefined,
    phonenumber: undefined,
    status: undefined,
    deptId: undefined
  },
  rules: {
    userName: [{ required: true, message: "账号不能为空", trigger: "blur" }, { min: 2, max: 20, message: "账号长度必须介于 2 和 20 之间", trigger: "blur" }],
    nickName: [{ required: true, message: "用户姓名不能为空", trigger: "blur" }],
    deptId: [{ required: true, message: "归属部门不能为空", trigger: "blur" }],
    password: [{ required: true, validator: passwordValidate, trigger: "blur" }],
    email: [{ type: "email", message: "请输入正确的邮箱地址", trigger: ["blur", "change"] }],
    phonenumber: [{ pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" }]
  }
});

const { queryParams, form, rules } = toRefs(data);

const getNodeImg = (data) => {
  let imgHash = {
    0: "company",
    1: "department",
  }
  if (imgHash[data.type]) {
    return imgHash[data.type]
  }
}
getUser().then(response => {
  roleOptions.value = response.roles;
});
// 当前激活需要重新调一次接口
onActivated(() => {
  getUser().then(response => {
    roleOptions.value = response.roles;
  });
})
/** 通过条件过滤节点  */
const filterNode = (value, data) => {
  if (!value) return true;
  return data.label.indexOf(value) !== -1;
};
/** 根据名称筛选部门树 */
watch(deptName, val => {
  proxy.$refs["deptTreeRef"].filter(val);
});
/** 查询部门下拉树结构 */
function getDeptTree() {
  treeDept().then(response => {
    deptOptions.value = response.data;
  });
};
/** 查询用户列表 */
function getList() {
  loading.value = true;
  listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(res => {
    loading.value = false;
    userList.value = res.rows;
    total.value = res.total;
  });
};
/** 节点单击事件 */
function handleNodeClick(data) {
  queryParams.value.deptId = data.id;
  handleQuery();
};
/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
};
/** 重置按钮操作 */
function resetQuery() {
  dateRange.value = [];
  proxy.resetForm("queryRef");
  queryParams.value.deptId = undefined;
  proxy.$refs.deptTreeRef.setCurrentKey(null);
  handleQuery();
};
/** 删除按钮操作 */
function handleDelete(row) {
  const userIds = row.userId || ids.value;
  proxy.$modal.confirm('是否确认删除用户编号为"' + userIds + '"的数据项？').then(function () {
    return delUser(userIds);
  }).then(() => {
    getList();
    proxy.$modal.msgSuccess("删除成功");
  }).catch(() => { });
};
/** 导出按钮操作 */
function handleExport() {
  proxy.download(
    "system/user/export",
    { ...queryParams.value, },
    `用户管理_${dayjs(new Date()).format("YYYY-MM-DD_HH:mm:ss")}.xlsx`
  );
};
/** 用户状态修改  */
function handleStatusChange(row) {
  let text = row.status === "0" ? "启用" : "停用";
  proxy.$modal.confirm('确认要"' + text + '""' + row.userName + '"用户吗?').then(function () {
    return changeUserStatus(row.userId, row.status);
  }).then(() => {
    proxy.$modal.msgSuccess(text + "成功");
  }).catch(function () {
    row.status = row.status === "0" ? "1" : "0";
  });
};
/** 更多操作 */
function handleCommand(command, row) {
  switch (command) {
    case "handleResetPwd":
      handleResetPwd(row);
      break;
    case "handleAuthRole":
      handleAuthRole(row);
      break;
    default:
      break;
  }
};
/** 跳转角色分配 */
function handleAuthRole(row) {
  const userId = row.userId;
  router.push("/system/user-auth/role/" + userId);
};
// 这里的验证方法不太一样，根据element-plus要求重写
const passwordValidateRewrite = (value) => {
  if (value === "" || value === null || value === undefined) {
    return "密码不能为空";
  } else {
    if (value.length < 8) {
      return "密码要求长度8位及以上";
    }
    let MyRegExp = /^(?![A-z0-9]+$)(?=.[^%&',;=?$\x22])(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9]).{8,100}$/
    if (!MyRegExp.test(value)) {
      return "密码要包含大小写字母、数字和特殊符号";
    } else {
      //校验通过
      return true;
    }
  }
};
/** 重置密码按钮操作 */
function handleResetPwd(row) {
  proxy.$prompt('请输入"' + row.userName + '"的新密码', "修改密码", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    closeOnClickModal: false,
    inputValidator: passwordValidateRewrite,
    inputValue: "Sky@123"
  }).then(({ value }) => {
    resetUserPwd(row.userId, value).then(response => {
      proxy.$modal.msgSuccess("修改成功，新密码是：" + value);
    });
  }).catch(() => { });
};
/** 选择条数  */
function handleSelectionChange(selection) {
  ids.value = selection.map(item => item.userId);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
};
/** 导入按钮操作 */
function handleImport() {
  upload.title = "用户导入";
  upload.open = true;
};
/** 下载模板操作 */
function importTemplate() {
  proxy.download("system/user/importTemplate", {
  }, `用户管理_导入模板.xlsx`);
};
/**文件上传中处理 */
const handleFileUploadProgress = (event, file, fileList) => {
  upload.isUploading = true;
};
/** 文件上传成功处理 */
const handleFileSuccess = (response, file, fileList) => {
  upload.open = false;
  upload.isUploading = false;
  proxy.$refs["uploadRef"].handleRemove(file);
  proxy.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true });
  getList();
};
/** 提交上传文件 */
function submitFileForm() {
  proxy.$refs["uploadRef"].submit();
};
/** 重置操作表单 */
function reset() {
  form.value = {
    userId: undefined,
    deptId: undefined,
    userName: undefined,
    nickName: undefined,
    password: undefined,
    phonenumber: undefined,
    email: undefined,
    sex: undefined,
    status: "0",
    remark: undefined,
    postIds: [],
    roleIds: []
  };
  proxy.resetForm("userRef");
};
/** 取消按钮 */
function cancel() {
  open.value = false;
  setTimeout(() => {
    reset();
  }, 200)
};
/** 新增按钮操作 */
function handleAdd() {
  reset();
  getUser().then(response => {
    postOptions.value = response.posts;
    eidtRoleOptions.value = response.roles;
    open.value = true;
    title.value = "添加用户";
    form.value.password = initPassword.value;
  });
};
/** 修改按钮操作 */
function handleUpdate(row) {
  reset();
  const userId = row.userId || ids.value;
  getUser(userId).then(response => {
    form.value = response.data;
    postOptions.value = response.posts;
    eidtRoleOptions.value = response.roles;
    form.value.postIds = response.postIds;
    form.value.roleIds = response.roleIds;
    open.value = true;
    title.value = "修改用户";
    form.password = "";
    // 生效时间与后端约定
    form.value.time = [form.value.effectiveTime, form.value.expireTime];
  });
};
/** 提交按钮 */
function submitForm() {
  proxy.$refs["userRef"].validate(valid => {
    if (valid) {
      if (form.value.time) {
        form.value.effectiveTime = form.value.time[0]
        form.value.expireTime = form.value.time[1]
      } else {
        form.value.effectiveTime = null;
        form.value.expireTime = null;
      }
      if (form.value.userId != undefined) {
        updateUser(form.value).then(response => {
          proxy.$modal.msgSuccess("修改成功");
          open.value = false;
          getList();
        });
      } else {
        addUser(form.value).then(response => {
          proxy.$modal.msgSuccess("新增成功");
          open.value = false;
          getList();
        });
      }
    }
  });
};
getDeptTree();
getList();
</script>
<style lang="scss" scoped>
.left-dom {
  width: 280px;
  height: 100%;
  background: #fff;
  margin-right: 16px;
  position: absolute;
  left: 0;
  padding: 0 16px;

  .title {
    height: 31px;
    font-weight: 600;
    color: #424242;
    background-color: #e6efff;
    display: flex;
    align-items: center;
    margin: 16px 0;
    font-size: 16px;
    color: #424242;
    display: flex;
    align-items: center;
  }


  .move-img {
    background: url("../../../assets/img/moving.png") no-repeat center;
    width: 10px;
    height: 100%;
    cursor: col-resize;
    position: absolute;
    left: 270px;
    top: 0;
  }

  .tree-body {
    height: calc(100% - 80px);
    width: 100%;
    overflow: auto;

    .my-tree {
      font-size: 14px;
      user-select: none;

      :deep(.el-tree-node) {
        min-width: -webkit-max-content;

        >.el-tree-node__children {
          overflow: visible;
        }
      }

      span {

        div,
        img {
          position: relative;
          top: 3px;
          margin: 0 5px;
        }
      }
    }
  }
}

.right-dom {
  width: calc(100% - 296px);
  height: 100%;
  display: inline-flex;
  flex-direction: column;
  position: absolute;
  right: 0;

  &>.el-form {
    background-color: #fff;
    padding: 8px 16px;
    margin-bottom: 8px;
    line-height: 48px;

    &>.el-form-item {
      margin-bottom: 0;
      width: 308px;

      .el-date-editor {
        width: 100%;
      }

      .el-select {
        width: 100%;
      }

      &:last-of-type {
        width: unset;
        margin-right: 0;
      }
    }
  }

  &>.el-row {
    padding: 16px;
    background-color: #fff;
    margin: 0 !important;
  }
}

:deep(.update-dom) {
  .el-input {
    width: 268px;
  }
}
</style>